import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat} from "@/utils/time";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import * as Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(Highcharts);
class CokeFuel extends Component {

  state = {

    chart: null,
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    globalTime: {
      currentTime: null
    },

    option : {
      chart: {
        type: 'pie',
        size:'80%',
        options3d: {
          enabled: true,
          alpha: 55,
          beta: 0,
          fitToPlot: true,

        },
        reflow: true,
      },
      plotHeight: 300,
      plotWidth: 300,
      title: {
        text: ''
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        pie: {
          size:'90%',
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            distance:1,
            format: '{point.percentage:.2f}%'
          },
          showInLegend: true,
          groupPadding: 1,
          groupZPadding: 1,
        }
      },
      // legend: {//控制图例显示位置
      //   layout: 'vertical',
      //   align: 'left',
      //   verticalAlign: 'top',
      //   borderWidth: 0
      // },
      series: [{
        type: 'pie',
        name: '占比',
      }]
    }
  };

  componentDidMount() {
    const {chartId} = this.props;
    const {option} = this.state;

    // 基于准备好的dom，初始化highcharts实例
    this.state.chart = Highcharts.chart(document.getElementById(chartId), option);
    // TODO 大小自适应
    this.state.chart.reflow();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {data} = nextProps;
    if (data !== undefined && data !== null && data !== prevState.data && prevState.chart !== null) {
      if (data.cokeFuel !== undefined && data.cokeFuel !== null){
        let display = [];
        for (const [key, value] of Object.entries(data.cokeFuel)) {
          display.push({
            name: key,
            y: value,
          })
        }
        prevState.option.series[0].data = display;
        prevState.chart.update(prevState.option)
        // prevState.chart.series[0].setData(data.coke_fuel)
      }
    }
    return null
  }


  render() {
    const {
      width = 100,
      height = 300,
      chartId
    }
      = this.props;

    const {startTime, endTime} = this.state;
    const dateFormat = 'YYYY-MM-DD HH';

    return (
      <div id={chartId} style={{width: `${width}%`, height}}/>
    )
  }
}


export default connect(({hanfan, global}) => ({
  globalTime: hanfan.globalTime,
  global
}))(CokeFuel);
